<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>控制面板展示 - 御物联</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root{
            --primary:#409EFF;
            --stage-bg:#EDE3D3; /* 全屏舞台背景（如截图外层米色） */
            --bg:#F5F7FA;      /* 页面内部背景（卡片外层浅灰） */
            --text:#303133;
            --subtext:#909399;
            --card:#FFFFFF;
            --border:#EBEEF5;
            --ok:#67C23A;
            --warn:#E6A23C;
            --danger:#F56C6C;
        }
        body{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; background:var(--stage-bg); color:var(--text); }

        /* 页面容器，限制移动端阅读宽度并居中 */
        .page{ min-height:100vh; padding:20px 0; max-width:480px; margin:0 auto; background:var(--bg); }


        /* 页面标题 */
        .page-title{ padding:20px 16px; text-align:center; font-size:24px; font-weight:600; color:var(--primary); }

        /* 控制类型网格 */
        .control-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:0 16px 20px; }
        .control-card{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.03); cursor:pointer; transition:all 0.3s ease; }
        .control-card:hover{ transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.1); }
        .control-icon{ font-size:32px; margin-bottom:12px; }
        .control-name{ font-size:16px; font-weight:600; color:var(--text); margin-bottom:8px; }
        .control-desc{ font-size:12px; color:var(--subtext); }

        /* 弹框遮罩 */
        .modal-mask{ position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:999; }
        .modal-mask.open{ opacity:1; pointer-events:auto; }

        /* 弹框容器 */
        .modal-dialog{ position:fixed; top:50%; left:50%; transform:translate(-50%, -50%) scale(0.9); background:var(--card); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.15); transition:transform .25s ease; z-index:1000; min-width:320px; max-width:400px; width:90vw; }
        .modal-mask.open .modal-dialog{ transform:translate(-50%, -50%) scale(1); }

        /* 弹框头部 */
        .modal-header{ padding:20px 20px 0; display:flex; align-items:center; justify-content:space-between; }
        .modal-title{ font-size:18px; font-weight:600; color:var(--text); }
        .modal-close{ width:24px; height:24px; border:none; background:none; font-size:20px; color:var(--subtext); cursor:pointer; }

        /* 弹框内容 */
        .modal-body{ padding:20px; }
        .modal-footer{ padding:0 20px 20px; display:flex; gap:12px; }

        /* 按钮样式 */
        .btn{ height:40px; border-radius:8px; border:1px solid var(--border); background:#fff; color:var(--text); font-size:14px; cursor:pointer; transition:all 0.3s ease; display:flex; align-items:center; justify-content:center; }
        .btn-primary{ background:var(--primary); color:#fff; border-color:var(--primary); }
        .btn-success{ background:var(--ok); color:#fff; border-color:var(--ok); }
        .btn-danger{ background:var(--danger); color:#fff; border-color:var(--danger); }
        .btn:hover{ opacity:0.8; }
        .btn:disabled{ opacity:0.5; cursor:not-allowed; }

        /* 开关类样式 */
        .switch-controls{ display:flex; gap:16px; justify-content:center; margin:20px 0; }
        .switch-btn{ flex:1; height:50px; border-radius:8px; font-size:16px; font-weight:600; }

        /* 空调类样式 */
        .aircon-controls{ margin:20px 0; }
        .aircon-power{ display:flex; gap:16px; justify-content:center; margin-bottom:20px; }
        .aircon-power .btn{ flex:1; height:50px; font-size:16px; font-weight:600; }
        .aircon-temp{ text-align:center; }
        .temp-label{ font-size:14px; color:var(--subtext); margin-bottom:12px; }
        .temp-controls{ display:flex; align-items:center; gap:16px; justify-content:center; }
        .temp-btn{ width:40px; height:40px; border-radius:50%; font-size:20px; font-weight:bold; }
        .temp-display{ font-size:24px; font-weight:600; color:var(--primary); min-width:60px; }
        .temp-mode{ margin-top:16px; }
        .mode-buttons{ display:flex; gap:8px; justify-content:center; }
        .mode-btn{ padding:8px 16px; border-radius:20px; font-size:14px; }

        /* 进度条样式 */
        .progress-control{ margin:20px 0; }
        .progress-label{ font-size:14px; color:var(--subtext); margin-bottom:12px; text-align:center; }
        .progress-container{ position:relative; height:8px; background:var(--border); border-radius:4px; margin:20px 0; }
        .progress-bar{ height:100%; background:var(--primary); border-radius:4px; transition:width 0.3s ease; }
        .progress-handle{ position:absolute; top:50%; transform:translateY(-50%); width:20px; height:20px; background:var(--primary); border:3px solid #fff; border-radius:50%; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.2); }
        .progress-value{ text-align:center; font-size:18px; font-weight:600; color:var(--primary); margin-top:12px; }

    </style>
</head>
<body>
    <div class="page">

        <!-- 页面标题 -->
        <div class="page-title">控制面板展示</div>

        <!-- 控制类型网格 -->
        <div class="control-grid">
            <div class="control-card" onclick="openSwitchModal()">
                <div class="control-icon">🔘</div>
                <div class="control-name">开关类</div>
                <div class="control-desc">点击打开/关闭控制</div>
            </div>
            <div class="control-card" onclick="openAirconModal()">
                <div class="control-icon">❄️</div>
                <div class="control-name">空调类</div>
                <div class="control-desc">温度调节控制</div>
            </div>
            <div class="control-card" onclick="openBrightnessModal()">
                <div class="control-icon">💡</div>
                <div class="control-name">亮度类</div>
                <div class="control-desc">亮度百分比控制</div>
            </div>
            <div class="control-card" onclick="openOpeningModal()">
                <div class="control-icon">📏</div>
                <div class="control-name">开度类</div>
                <div class="control-desc">开度百分比控制</div>
            </div>
        </div>
    </div>


    <!-- 开关类弹框 -->
    <div class="modal-mask" id="switchModal">
        <div class="modal-dialog">
            <div class="modal-header">
                <div class="modal-title">开关控制</div>
                <button class="modal-close" onclick="closeModal('switchModal')">×</button>
            </div>
            <div class="modal-body">
                <div class="switch-controls">
                    <button class="btn btn-success switch-btn" onclick="setSwitchState('on')">打开</button>
                    <button class="btn btn-danger switch-btn" onclick="setSwitchState('off')">关闭</button>
                </div>
                <div style="text-align:center; margin-top:20px;">
                    <div id="switchStatus" style="font-size:16px; color:var(--subtext);">当前状态：未选择</div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" onclick="closeModal('switchModal')" style="flex:1;">取消</button>
                <button class="btn btn-primary" onclick="confirmSwitch()" style="flex:1;">保存</button>
            </div>
        </div>
    </div>

    <!-- 空调类弹框 -->
    <div class="modal-mask" id="airconModal">
        <div class="modal-dialog">
            <div class="modal-header">
                <div class="modal-title">空调控制</div>
                <button class="modal-close" onclick="closeModal('airconModal')">×</button>
            </div>
            <div class="modal-body">
                <div class="aircon-controls">
                    <div class="aircon-power">
                        <button class="btn btn-success" onclick="setAirconPower('on')">打开空调</button>
                        <button class="btn btn-danger" onclick="setAirconPower('off')">关闭空调</button>
                    </div>
                    <div class="aircon-temp">
                        <div class="temp-label">温度调节</div>
                        <div class="temp-controls">
                            <button class="btn temp-btn" onclick="changeTemp(-1)">-</button>
                            <div class="temp-display" id="tempDisplay">25°C</div>
                            <button class="btn temp-btn" onclick="changeTemp(1)">+</button>
                        </div>
                        <div class="temp-mode">
                            <div class="mode-buttons">
                                <button class="btn mode-btn" onclick="setTempMode('cool')" id="coolBtn">制冷</button>
                                <button class="btn mode-btn" onclick="setTempMode('heat')" id="heatBtn">制热</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" onclick="closeModal('airconModal')" style="flex:1;">取消</button>
                <button class="btn btn-primary" onclick="confirmAircon()" style="flex:1;">保存</button>
            </div>
        </div>
    </div>

    <!-- 亮度类弹框 -->
    <div class="modal-mask" id="brightnessModal">
        <div class="modal-dialog">
            <div class="modal-header">
                <div class="modal-title">亮度控制</div>
                <button class="modal-close" onclick="closeModal('brightnessModal')">×</button>
            </div>
            <div class="modal-body">
                <div class="progress-control">
                    <div class="progress-label">亮度调节</div>
                    <div class="progress-container" id="brightnessContainer" onclick="setBrightness(event)">
                        <div class="progress-bar" id="brightnessBar" style="width: 50%;"></div>
                        <div class="progress-handle" id="brightnessHandle" style="left: 50%;"></div>
                    </div>
                    <div class="progress-value" id="brightnessValue">50%</div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" onclick="closeModal('brightnessModal')" style="flex:1;">取消</button>
                <button class="btn btn-primary" onclick="confirmBrightness()" style="flex:1;">保存</button>
            </div>
        </div>
    </div>

    <!-- 开度类弹框 -->
    <div class="modal-mask" id="openingModal">
        <div class="modal-dialog">
            <div class="modal-header">
                <div class="modal-title">开度控制</div>
                <button class="modal-close" onclick="closeModal('openingModal')">×</button>
            </div>
            <div class="modal-body">
                <div class="progress-control">
                    <div class="progress-label">开度调节</div>
                    <div class="progress-container" id="openingContainer" onclick="setOpening(event)">
                        <div class="progress-bar" id="openingBar" style="width: 0%;"></div>
                        <div class="progress-handle" id="openingHandle" style="left: 0%;"></div>
                    </div>
                    <div class="progress-value" id="openingValue">0%</div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" onclick="closeModal('openingModal')" style="flex:1;">取消</button>
                <button class="btn btn-primary" onclick="confirmOpening()" style="flex:1;">保存</button>
            </div>
        </div>
    </div>

    <script>

        // 全局变量存储控制状态
        let switchState = null;
        let airconState = { power: 'off', temp: 25, mode: 'cool' };
        let brightnessValue = 50;
        let openingValue = 0;

        // 弹框控制函数
        function openModal(modalId) {
            document.getElementById(modalId).classList.add('open');
        }

        function closeModal(modalId) {
            document.getElementById(modalId).classList.remove('open');
        }

        // 开关类控制
        function openSwitchModal() {
            openModal('switchModal');
        }

        function setSwitchState(state) {
            switchState = state;
            const statusEl = document.getElementById('switchStatus');
            statusEl.textContent = `当前状态：${state === 'on' ? '打开' : '关闭'}`;
            statusEl.style.color = state === 'on' ? 'var(--ok)' : 'var(--danger)';
        }

        function confirmSwitch() {
            if (switchState) {
                alert(`开关控制已保存：${switchState === 'on' ? '打开' : '关闭'}`);
                closeModal('switchModal');
            } else {
                alert('请先选择开关状态！');
            }
        }

        // 空调类控制
        function openAirconModal() {
            // 重置空调状态为默认值
            airconState = { power: 'off', temp: 25, mode: 'cool' };
            
            // 更新UI显示
            document.getElementById('tempDisplay').textContent = airconState.temp + '°C';
            
            // 设置默认模式为制冷
            document.querySelectorAll('.mode-btn').forEach(btn => btn.classList.remove('btn-primary'));
            document.getElementById('coolBtn').classList.add('btn-primary');
            
            openModal('airconModal');
        }

        function setAirconPower(power) {
            airconState.power = power;
            const powerText = power === 'on' ? '打开空调' : '关闭空调';
            alert(`命令已经发出：${powerText}`);
        }

        function changeTemp(delta) {
            airconState.temp = Math.max(16, Math.min(30, airconState.temp + delta));
            document.getElementById('tempDisplay').textContent = airconState.temp + '°C';
        }

        function setTempMode(mode) {
            airconState.mode = mode;
            document.querySelectorAll('.mode-btn').forEach(btn => btn.classList.remove('btn-primary'));
            document.getElementById(mode + 'Btn').classList.add('btn-primary');
        }

        function confirmAircon() {
            alert(`空调控制已保存：${airconState.power === 'on' ? '打开' : '关闭'}，温度：${airconState.temp}°C，模式：${airconState.mode === 'cool' ? '制冷' : '制热'}`);
            closeModal('airconModal');
        }

        // 亮度类控制
        function openBrightnessModal() {
            openModal('brightnessModal');
        }

        function setBrightness(event) {
            const container = document.getElementById('brightnessContainer');
            const rect = container.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const percentage = Math.round((x / rect.width) * 100);
            const clampedPercentage = Math.max(0, Math.min(100, percentage));
            
            brightnessValue = clampedPercentage;
            document.getElementById('brightnessBar').style.width = clampedPercentage + '%';
            document.getElementById('brightnessHandle').style.left = clampedPercentage + '%';
            document.getElementById('brightnessValue').textContent = clampedPercentage + '%';
        }

        function confirmBrightness() {
            alert(`亮度控制已保存：${brightnessValue}%`);
            closeModal('brightnessModal');
        }

        // 开度类控制
        function openOpeningModal() {
            openModal('openingModal');
        }

        function setOpening(event) {
            const container = document.getElementById('openingContainer');
            const rect = container.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const percentage = Math.round((x / rect.width) * 100);
            const clampedPercentage = Math.max(0, Math.min(100, percentage));
            
            openingValue = clampedPercentage;
            document.getElementById('openingBar').style.width = clampedPercentage + '%';
            document.getElementById('openingHandle').style.left = clampedPercentage + '%';
            document.getElementById('openingValue').textContent = clampedPercentage + '%';
        }

        function confirmOpening() {
            alert(`开度控制已保存：${openingValue}%`);
            closeModal('openingModal');
        }

        // 点击遮罩关闭弹框
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('modal-mask')) {
                e.target.classList.remove('open');
            }
        });
    </script>
</body>
</html>
